<template>
	<div class="app-container">
		<head-top></head-top>
		<div class="bg-fff of nxb-box" id="aCoursesList">
			<div class="bg-fff of">
				<section class="container">
					<section class="mt20">
						<section class="path-wrap txtOf hLh30 nav-path-wrap firstLevel current">
							<a href="javascript:void(0);" class="c-333 fsize14 one" title="全部直播" @click="getLiveList({})">全部直播</a>
						</section>
						<section class="c-s-dl bg-fff c-cou-box">
							<dl>
								<div class="fl-wrap"> <dt><span class="c-333 fsize14">状态：</span></dt>
									<dd class="c-s-dl-li">
										<ul class="clearfix">
											<li  :class="page['liveStatus'] ==''?'current':''">
												<a  title="全部" href="javascript:void(0);" @click="changliveStatus('')">全部</a>
											</li>
											<li v-for="item in liveStatus" :class="page['liveStatus'] ==item.value?'current':''">
												<a  :title="item.status" href="javascript:void(0);" @click="changliveStatus(item.value)">{{item.status}}</a>
											</li>
											
										</ul>
										<aside class="c-s-more">
											<a href="javascript: void(0)" title="" class="fsize14 c-master" style="display: none;">[展开]</a>
										</aside>
									</dd>
								</div>
							</dl>
							<div class="clear"></div>
						</section>
						<section class="c-s-dl bg-fff c-cou-box">
							<dl>
								<div class="fl-wrap clearfix"> <dt><span class="c-333 fsize14">类型：</span></dt>
									<dd class="c-s-dl-li fl">
										<ul class="clearfix">
											<li :class="page['filetype'] ==''?'current':''">
												<a href="javascript:void(0)" @click="filetype('')" title="全部">全部</a>
											</li>
											<li :class="page['filetype'] =='VIDEO'?'current':''">
												<a href="javascript:void(0)" @click="filetype('VIDEO')" title="视频">视频</a>
											</li>
											<li :class="page['filetype'] =='AUDIO'?'current':''">
												<a href="javascript:void(0)" @click="filetype('AUDIO')" title="音频">音频</a>
											</li>
											
										</ul>
									</dd>
								</div>
							</dl>
							<div class="clear"></div>
						</section>
						
					</section>	
				</section>
			</div>
			<section class="container">
				<section class="c-sort-box cou-list-wrap">
					<div class="mt15">
						<div class="net-cou-box open-cou-wrap">
							<ul class="of job-cou-list">
								<li v-for="item in liveList">
									<div class="cc-l-wrap">
										<a href="javascript:void(0)" @click="routerInfo(item.id)"  class="course-img" :title="item.name"> 
											<img :src="domainUrls() + item.image" alt="" width="200" height="111" class="img-responsive">
											<div class="course-label"> 
												<label title="视频" v-show="item.filetype == 'VIDEO'"><em class="icon16 video-icon"></em></label>
												<label title="音频" v-show="item.filetype == 'AUDIO'"><em class="icon16 audio-icon"></em></label>
												<label>
													
													<span class="vam" v-show="item.liveStatus == 1">已结束</span>
													<span class="vam" v-show="item.liveStatus == 2">直播中</span>
													<span class="vam" v-show="item.liveStatus == 3">未开始</span>
												</label> 
												
											</div>
										</a>
										<div class="j-c-desc-wrap">
											<section class="j-c-title">
												<h3 class="pt10">
													<a  href="javascript:void(0)" class="j-course-title" :title="item.name"   style="word-wrap: break-word;">{{item.name}}</a> 
												</h3>
												<div class="clearfix of mt5 cj-cou-ds hLh20" v-for="teachItem in item.teacherList" v-if="item.teacherList"> 
													<span class="c-999 f-fM txtOf fsize12" :title="teachItem.name"> 
														<a class="c-999 fsize12 mr10" >{{teachItem.name}}</a> 
													</span> 
												</div>
											</section>
											<div class="cj-cou-time mt5 hLh20"> <span class="c-999 fsize12 f-fM">{{item.liveEndtime}}结束</span> </div>
										</div>
									</div>
								</li>
								
							</ul>
							<div class="noContent" v-show="liveList.length<1">暂无内容</div>
						</div>
						<div class="page-mar-top tac" style="margin-top: 30px;" v-show="totalResultSize>0">
							<el-pagination
							  background
							  prev-text = "上一页"
							  next-text = '下一页'
							  layout="prev, pager, next"
							  :current-page = "page.currentPage"
							  :page-count="totalPageSize"
							  :total="totalResultSize"
							   @current-change="currentChange"
							  >
							</el-pagination>
							
						</div>
					</div>
				</section>
			</section>
		</div>
		
		
		
		
		
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import { domainUrl } from '@/utils/index'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	import { getLiveList } from '@/api/course'
	export default {
		components: { //引入组件
			headTop,
			footBootom

		},
		name: 'live',
		data() {
			return {
				liveList:[],
				totalResultSize:1,
				totalPageSize:1,
				page:{
					liveStatus:"",
					currentPage:1,
					filetype:""
				},
				liveStatus:[
					{
						value:1,status:"已结束"
					},
					{
						value:2,status:"直播中"
					},
					{
						value:3,status:"未开始"
					},
				]
			}
		},
		created(){
			this.getLiveList({});
		},
		methods:{
			domainUrls(){
				return domainUrl()
			},
			getLiveList(data){
				getLiveList(data).then((res)=>{
					this.liveList = res.entity.data;
					this.totalResultSize = res.entity.page.totalResultSize;
					this.totalPageSize = res.entity.page.totalPageSize
					this.page["currentPage"] = res.entity.page.currentPage;
				})
			},
			changliveStatus(val){
				this.page.liveStatus = val;
				this.page.currentPage = 1;
				this.getLiveList(this.page);
			},
			filetype(val){
				this.page.filetype = val;
				this.page.currentPage = 1;
				this.getLiveList(this.page);
			},
			routerInfo(id){
				this.$router.push({
					path: '/courseInfo',
					query: {
						id: id,
						type:'LIVE'
					}
				})
				
			},
			currentChange(val){//分页
				this.page["currentPage"] = val;
				this.getLiveList(this.page);
			},
			
		}
	}
</script>

<style>

</style>